<template>
    <div class="layoutMain">
        <!--gis 测试-->
        <TestGIS></TestGIS>
        <Map2D class="map-wrap" targetId="map"></Map2D>
        <!-- <Coordinate></Coordinate> -->
        <Level></Level>
        <gis-switch-map v-if="isSwitchShow" :options="optionsSwitch" ></gis-switch-map>
    </div>
</template>
<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import TestGIS from '@/gis/TestGIS.vue';
    import Map2D from '@/views/common/Map2D.vue';
    import MapCommon from '@/util/MapCommon';
    import Coordinate from '@/components/common/gis/Coordinate/Coordinate.vue';
    import Level from '@/components/common/gis/level/level.vue';
    import GisSwitchMap from '@/components/common/gis/GisSwitchMap/GisSwitchMap.vue';
    @Component({
        name: 'LayoutMain',
        mixins: [MapCommon],
        components : {
            TestGIS,
            Map2D,
            Coordinate,
            Level,
            GisSwitchMap,
        },
    })
     export default class LayoutMain extends Vue {
        private optionsSwitch = { mapId: 'map', baseLayers: [] };
        private isSwitchShow: boolean = false;
        private mounted() {
            (this as any).resolveMap('map').then((data: any) => {
            const baseLayers = this.getBaseLayers();
            this.optionsSwitch.baseLayers = baseLayers;
            this.isSwitchShow = true;
            });
        }
        private getBaseLayers() {
            const mapConfig = (this as any).$ioc.resolve('mapConfig-map');
            return mapConfig.baseLayers;
        }
    }

</script>
<style lang="less" scoped>
  @import url('../../assets/css/Layout.less');
  .gispopup{
      position: absolute;
      top: 300px;
      left: 400px;
  }
</style>
